<template>
    <view>
        <custom>
            <template #right>
                <view class="search-form round border-1-nddyny" style="height: 72rpx; margin-left: 20rpx; margin-right: 20rpx;">
                    <text class="cuIcon-search"></text>
                    <input @input="(e)=>{data.form.search_value = e.target.value}" :value="data.form.search_value"
                        style="font-size: 28rpx;" placeholder="搜一搜商家、商品、下单日期" confirm-type="search"></input>
                    <text class="cuIcon-close" style="margin-right: 16rpx; margin-left: 0" @tap="()=>{data.form.search_value = ''; searchBtn()}"></text>
                </view>
                <view @tap="searchBtn" class="text-lg margin-right-24">
                    <text>搜索</text>
                </view>
            </template>
        </custom>
        <navTabs :tab.sync="order_type_tab" :changeTab="orderTypeTabChange"></navTabs>
        <nFormItem key="form_buy_mode_field" class="margin-bottom-10" title="配送" title_em="2" type="radio_tag_optional"
            :data.sync="data_tmp" field="buy_mode" :radio_values="{
                'buy_mode_2': '全国邮寄',
                'buy_mode_0': '同城配送',
                'buy_mode_1': '到店自取',
            }"></nFormItem>
        <emptyList v-if="data.list.length == 0" empty_list_title="还没有订单"></emptyList>
        <scroll-view v-else :style="'height:calc(100vh - 110rpx - 92rpx - '+$store.state.app.custom_bar+')'" :scroll-y="true"
            @scrolltolower="scrolltolower">
            <view v-for="(info, key) in data.list" :key="key" class="bg-white margin-lr-20 margin-top-10 margin-bottom-10 radius-16 padding-lr-24 padding-tb-20">
                <view class="flex justify-between" :class="[data.form.is_manage == 0?'align-center':'align-start padding-top-4']"
                    @tap="$store.commit('userNavTo', '/seller/item/list?seller_id='+info.seller_user_id+'&buy_mode='+info.buy_mode)">
                    <view v-if="data.form.is_manage == 0" class="flex align-center flex-g1">
                        <text v-if="data.form.buy_mode == ''" class="text-sm cu-tag radius bg-red light">
                            {{seller_buy_mode_int2string[info.buy_mode]}}
                        </text>
                        <text v-else class="text-xxl text-nddyny">
                            <text class="cuIcon-shop"></text>
                        </text>
                        <text class="text-lg margin-lr-10 text-cut-1">
                            {{info.seller_name}}
                        </text>
                        <text class="text-lg text-gray">
                            <text class="cuIcon-right"></text>
                        </text>
                    </view>
                    <view v-else>
                        <view class="text-15 align-center flex">
                            <text v-if="data.form.buy_mode == ''" class="text-sm cu-tag radius bg-red light margin-right-10">
                                {{seller_buy_mode_int2string[info.buy_mode]}}
                            </text>
                            <text v-if="info.recv_phone">
                                {{info.recv_name}}<text class="margin-left-6 text-13 text-gray">{{info.recv_phone}}</text>
                            </text>
                            <text v-else class="text-11 text-gray">{{info.pay_order_no}}</text>
                        </view>
                        <view v-if="info.recv_province_city_area_name" class="text-gray margin-top-10">
                            {{info.recv_province_city_area_name}} {{info.recv_address_remark}}
                        </view>
                    </view>
                    <view class="text-red flex-s0 margin-left-10 text-right" style="width: 100rpx;">
                        {{info.order_type_string}}
                    </view>
                </view>
                <view v-if="info.pay_status != 1" class="text-red margin-top-10">
                    <text class="text-bold text-15">支付成功但出错了：</text>{{info.pay_remark}}
                </view>
                <view v-if="info.remark" class="text-nddyny text-sm margin-top-10">
                    <text class="text-bold">订单备注：</text>{{info.remark}}
                </view>
                <view class="margin-top-10">
                    <view class="flex padding-top-20" v-for="(item, ckey) in JSON.parse(info.items)" :key="ckey" @tap="$store.commit('userNavTo', 
                        data.form.is_manage == 0 ?
                        '/seller/item/list?seller_id='+info.seller_user_id+'&buy_mode='+info.buy_mode+'&item_id='+item.item_id :
                        '/seller/item/info?item_id='+item.item_id
                    )">
                        <view class="margin-right-10 flex-s0">
                            <image class="radius-10" style="width: 144rpx; height:144rpx;" :src="item.logo | ossUrl(144)"></image>
                        </view>
                        <view class="text-gray text-sm margin-left-4 flex-g1">
                            <view class="text-df text-333 line-height-11em text-cut-2">
                                {{item.name}}
                            </view>
                            <view class="margin-bottom-10 text-cut-3">
                                <view v-if="item.attr_value_1" class="cu-tag bg-nddyny margin-top-10">{{item.attr_value_1}}</view>
                                <view v-if="item.attr_value_2" class="cu-tag bg-nddyny margin-top-10">{{item.attr_value_2}}</view>
                                <view v-if="item.attr_value_3" class="cu-tag bg-nddyny margin-top-10">{{item.attr_value_3}}</view>
                            </view>
                            <view class="flex text-sm margin-top-2 margin-bottom-2 text-red" v-if="item.pack_price > 0">
                                <text>包装费</text>
                                <text>￥</text>
                                <text style="margin-left: -4rpx">{{item.pack_price | floor}}</text>
                            </view>
                            <view class="flex margin-top-2">
                                <text v-if="item.oprice>0" class="text-through text-red text-bold margin-right-10">
                                    ￥
                                    <text style="margin-left: -4rpx">{{item.oprice | floor}}</text>
                                </text>
                                <text class="margin-right-10 text-nddyny">
                                    <text class="margin-right-4">送金券</text>
                                    <text>{{item.bonus_gold_coupon_ratio}}%</text>
                                </text>
                            </view>
                        </view>
                        <view class="margin-left-10 flex-s0 text-right">
                            <view class="text-red text-bold">
                                <text>￥</text>
                                <text class="text-df">
                                    {{item.price | floor}}
                                </text>
                            </view>
                            <view class="text-13 text-gray">
                                x<text class="margin-left-2">{{item.amount}}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="text-right text-gray text-13 margin-top-4">
                    <view v-if="data.form.is_manage == 0">
                        <view class="margin-top-10" v-if="info.bonus_gold_coupon_amount > 0">
                            赠送金券：
                            <text>总赠 {{info.bonus_gold_coupon_amount | floor(4)}}，</text>
                            <text>实赠 {{info.bonus_user_success_gold_coupon_amount | floor(4)}}</text>
                        </view>
                        <view class="margin-top-10" v-if="info.pay_advpay_amount > 0 || info.pay_voucher_amount > 0">
                            使用：
                            <text v-if="info.pay_advpay_amount > 0">
                                消费余额 <text class="text-sm margin-left-4">￥</text>{{info.pay_advpay_amount | floor}}
                                <text v-if="info.pay_voucher_amount > 0">，</text>
                            </text>
                            <text v-if="info.pay_voucher_amount > 0">
                                消费红包<text class="text-sm margin-left-4">￥</text>{{info.pay_voucher_amount | floor}}
                            </text>
                        </view>
                    </view>
                    <view class="margin-top-10 text-666" v-if="info.pack_price > 0 || info.recv_price > 0">
                        <text v-if="info.pack_price > 0">
                            包装费<text class="text-sm margin-left-4">￥</text>{{info.pack_price | floor}}
                            <text v-if="info.recv_price > 0">，</text>
                        </text>
                        <text v-if="info.recv_price > 0">
                            配送费<text class="text-sm margin-left-4">￥</text>{{info.recv_price | floor}}
                        </text>
                    </view>
                    <view v-if="data.form.is_manage == 0">
                        <view class="margin-top-10 flex justify-between align-center">
                            <view class="flex-s0" @tap="()=>{info.is_detail = !info.is_detail}">
                                <text class="text-df" :class="[info.is_detail?'text-nddyny':'text-999']">
                                    查看更多
                                    <text :class="info.is_detail?'cuIcon-triangleupfill':'cuIcon-triangledownfill'"></text>
                                </text>
                            </view>
                            <view>
                                <text class="text-444 text-bold">
                                    总价<text class="text-sm margin-left-4">￥</text>{{info.pay_order_total_value | floor}}，
                                </text>
                                <text class="text-red text-bold text-df">
                                    实付款<text class="text-sm margin-left-4">￥</text>{{info.pay_order_price | floor}}
                                </text>
                            </view>
                        </view>
                    </view>
                    <view v-else>
                        <view class="margin-top-10 text-666">
                            <text>
                                赠送金券 {{info.pay_order_total_value | bc('sub', info.goods_amount) | floor(4)}}，
                            </text>
                            <text>
                                总价<text class="text-sm margin-left-4">￥</text>{{info.pay_order_total_value | floor}}
                            </text>
                        </view>
                        <view class="margin-top-10 flex justify-between align-center">
                            <view class="flex-s0" @tap="()=>{info.is_detail = !info.is_detail}">
                                <text class="text-df" :class="[info.is_detail?'text-nddyny':'text-999']">
                                    查看更多
                                    <text :class="info.is_detail?'cuIcon-triangleupfill':'cuIcon-triangledownfill'"></text>
                                </text>
                            </view>
                            <view class="text-bold text-df" :class="[
                                    info.pay_seller_goods_amount_status == 2 ? 'text-red' : '',
                                    info.pay_seller_goods_amount_status == 1 ? 'text-blue' : '',
                                    info.pay_seller_goods_amount_status == 0 ? '' : '',
                                ]">
                                <text v-if="info.pay_seller_goods_amount_status == 2">
                                    已到账货款
                                </text>
                                <text v-else-if="info.pay_seller_goods_amount_status == 1">
                                    冻结货款
                                </text>
                                <text v-else-if="info.pay_seller_goods_amount_status == 0">
                                    未到账货款
                                </text>
                                <text class="text-sm margin-left-4">￥</text>{{info.goods_amount | floor(4)}}
                            </view>
                        </view>
                    </view>
                </view>
                <view>
                    <template v-if="data.form.is_manage == 1">
                        <view v-if="info.order_type == 0" class="flex margin-top-20">
                            <nButton class="basis-33" bg="bg-red" title="取消" :tap="()=>{orderAction('cancel', '取消', info)}"></nButton>
                            <nButton class="basis-66 margin-left-16" title="接单" :tap="()=>{orderAction('confirm', '接单', info)}"></nButton>
                        </view>
                        <view v-if="info.order_type == 1" class="flex margin-top-20">
                            <nButton class="width-100p" title="发货" :tap="()=>{orderAction('send', '发货', info)}"></nButton>
                        </view>
                        <view v-if="info.order_type == 2 && info.express_no" class="flex margin-top-20">
                            <nButton class="width-100p" bg="bg-grey" title="查看物流" :tap="()=>{expressNo(info)}"></nButton>
                        </view>
                    </template>
                    <template v-else>
                        <!-- 用户的按键 -->
                        <view v-if="info.order_type == 0" class="flex margin-top-20">
                            <nButton class="width-100p" bg="bg-red" title="取消" :tap="()=>{orderAction('cancel', '取消', info)}"></nButton>
                        </view>
                        <view v-if="info.order_type == 2" class="flex margin-top-20">
                            <nButton v-if="info.express_no" class="basis-33" bg="bg-grey" title="查看物流" :tap="()=>{expressNo(info)}"></nButton>
                            <nButton :class="[info.express_no ? 'basis-66 margin-left-16' : 'width-100p']" title="收货"
                                :tap="()=>{orderAction('complete', '收货', info)}"></nButton>
                        </view>
                    </template>
                    <view v-if="info.order_type == 3 && info.express_no" class="flex margin-top-20">
                        <nButton class="width-100p" bg="bg-grey" title="查看物流" :tap="()=>{expressNo(info)}"></nButton>
                    </view>
                </view>
                <view v-if="info.is_detail" class="margin-top-20 text-gray text-13">
                    <view v-if="data.form.is_manage == 0" class="text-666">
                        <view v-if="info.buy_mode == 1" class="flex justify-between">
                            <view>配送信息：</view>
                            <view>到店自取</view>
                        </view>
                        <template v-else>
                            <view class="flex justify-between">
                                <view class="flex-s0">配送信息：</view>
                                <view>{{info.recv_province_city_area_name}} {{info.recv_address_remark}}</view>
                            </view>
                            <view class="text-sm text-right margin-top-6">
                                {{info.recv_name}} {{info.recv_phone}}
                            </view>
                        </template>
                    </view>
                    <view class="margin-top-10 flex justify-between">
                        <view>支付类型</view>
                        <view>{{info.pay_type_string}}</view>
                    </view>
                    <view class="margin-top-10 flex justify-between">
                        <view>订单组号</view>
                        <view>{{info.order_group_no}}</view>
                    </view>
                    <view class="margin-top-10 flex justify-between">
                        <view>订单编号</view>
                        <view>{{info.pay_order_no}}</view>
                    </view>
                    <view v-if="info.pay_callback_time > 0" class="margin-top-10 flex justify-between">
                        <view>支付时间</view>
                        <view>{{info.pay_callback_time | dateFormat('yyyy-MM-dd hh:mm:ss')}}</view>
                    </view>
                    <view v-if="info.confirm_time > 0" class="margin-top-10 flex justify-between">
                        <view>接单时间</view>
                        <view>{{info.confirm_time | dateFormat('yyyy-MM-dd hh:mm:ss')}}</view>
                    </view>
                    <view v-if="info.send_time > 0" class="margin-top-10 flex justify-between">
                        <view>发货时间</view>
                        <view>{{info.send_time | dateFormat('yyyy-MM-dd hh:mm:ss')}}</view>
                    </view>
                    <view v-if="info.complete_time > 0" class="margin-top-10 flex justify-between">
                        <view>收货时间</view>
                        <view>{{info.complete_time | dateFormat('yyyy-MM-dd hh:mm:ss')}}</view>
                    </view>
                    <view v-if="info.cancel_time > 0" class="margin-top-10 flex justify-between text-red">
                        <view>订单取消时间</view>
                        <view>{{info.cancel_time | dateFormat('yyyy-MM-dd hh:mm:ss')}}</view>
                    </view>
                    <view v-if="info.order_type == 4" class="margin-top-10 flex justify-between text-red">
                        <view>退款状态</view>
                        <view>{{info.pay_refund_status != '1' ? '待退款' : '退款成功，"实付金额"已退到"消费余额"'}}</view>
                    </view>
                    <view v-if="info.pay_refund_time > 0" class="margin-top-10 flex justify-between text-red">
                        <view>退款成功时间</view>
                        <view>{{info.pay_refund_time | dateFormat('yyyy-MM-dd hh:mm:ss')}}</view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <modalDialog :show.sync="order_action_dialog.show" :confirm="order_action_dialog.confirm" :content="order_action_dialog.content">
            <template #content>
                <nFormItem title="全国邮寄单号" title_em="6" :data.sync="order_action_data" field="express_no"></nFormItem>
            </template>
        </modalDialog>
        <footRight :autoRefresh="()=>{getList($api.list_action_force_init)}" :tapRefresh="()=>{getList($api.list_action_force_init)}"></footRight>
    </view>
</template>

<script>
    import footRight from '@/components/nddyny/common/footRight.vue';
    export default {
        components: {
            footRight,
        },
        data() {
            return {
                order_action_dialog: {
                    show: false,
                    content: '',
                    confirm: null,
                },
                order_type_tab: {
                    cur: 'order_type_',
                    list: {
                        'order_type_': {
                            title: '全部'
                        },
                        'order_type_0': {
                            title: '待接单'
                        },
                        'order_type_1': {
                            title: '待发货'
                        },
                        'order_type_2': {
                            title: '待收货'
                        },
                        'order_type_3': {
                            title: '已完成'
                        },
                        'order_type_4': {
                            title: '取消'
                        }
                    }
                },
                seller_buy_mode_int2string: this.$dict.seller_buy_mode_int2string,
                data_tmp: {
                    form: {
                        buy_mode: '',
                    }
                },
                data: {
                    form: {
                        search_value: '',
                        buy_mode: '',
                        order_type: '',
                        is_manage: '0',
                        seller_type: this.$store.state.user.is_seller_firm == 1 ? 1 : 0,
                    },
                    offset: 0,
                    limit: 15,
                    stop: false,
                    list: [],
                },
                order_action_data: {
                    form: {
                        express_no: ''
                    }
                }
            }
        },
        onLoad(params) {
            if (params.is_manage) {
                this.data.form.is_manage = params.is_manage;
            }
            if (params.seller_type) {
                this.data.form.seller_type = params.seller_type;
            }
            if (params.order_type) {
                this.order_type_tab.cur = 'order_type_' + params.order_type;
                this.data.form.order_type = params.order_type;
            }
            this.getList(this.$api.list_action_page_init);
        },
        watch: {
            'data_tmp.form.buy_mode'(new_value) {
                this.data.form.buy_mode = new_value ? new_value.substr(9) : '';
            },
            'data.form.buy_mode'(new_value) {
                this.data.form.buy_mode = new_value;
                this.getList(this.$api.list_action_force_init);
            },
        },
        methods: {
            searchBtn() {
                this.getList(this.$api.list_action_force_init);
            },
            orderTypeTabChange(key) {
                this.order_type_tab.cur = key;
                this.data.form.order_type = this.order_type_tab.cur.substr(11);
                this.getList(this.$api.list_action_force_init);
            },
            scrolltolower() {
                this.getList(this.$api.list_action_add);
            },
            getList(action, callback) {
                this.$api.list(this, {
                    action,
                    data_append: this.data.form,
                    url: '/seller/order/list',
                    success: (Result, data_key) => {
                        if (this.$api.form.toast(this, Result, data_key)) return;
                        Result.result.list.forEach(info => {
                            info.order_type_string = this.$dict.seller_order_type[info.order_type];
                            info.pay_type_string = this.$dict.pay_type[info.pay_type];
                            info.is_detail = false;
                        })
                        this.$set(this.data, 'list', this.data.list.concat(Result.result.list));
                        if (callback) {
                            callback();
                        }
                    }
                });
            },
            orderAction(action, title, order_info) {
                let pay_id = order_info.pay_id;
                let buy_mode = order_info.buy_mode;
                let data_append = {
                    pay_id
                };
                this.order_action_dialog.show = true;
                if (action == 'send' && buy_mode == '2') {
                    this.order_action_dialog.content = '';
                } else {
                    this.order_action_dialog.content = '确定要"' + title + '"吗？';
                }
                this.order_action_dialog.confirm = () => {
                    let url = '';
                    if (this.data.form.is_manage == '0') {
                        url = '/userPay/sellerItem/' + action;
                    } else {
                        url = '/seller/order/' + action;
                    }
                    if (action == 'send' && buy_mode == '2') {
                        data_append['express_no'] = this.order_action_data.form.express_no;
                    }
                    this.$api.post(this, {
                        loading: title + '中',
                        url,
                        data_key: null,
                        data_append: data_append,
                        success: (Result, data_key) => {
                            if (this.$api.form.toast(this, Result, data_key)) return;
                            if (this.order_action_dialog.show == true) {
                                this.order_action_dialog.show = false;
                            }
                            this.getList(this.$api.list_action_force_init);
                            this.$store.commit('userToastSuccess', {
                                message: title + '成功',
                                callback: () => {
                                    this.$user.updateUserAssetInfo(this)
                                }
                            });
                        }
                    });
                }
            },
            expressNo(info) {
                this.$store.commit('userNavTo', '/page/webView?title=查看物流&url=' +
                    encodeURIComponent('https://m.kuaidi100.com/result.jsp?nu=' + info.express_no)
                );
            }
        }
    }
</script>
